<template>
  <div class="global_company_info main_white marginTop10">
    <div class="main_tile boxdq">
      <div class="main_tile_l"><em></em>配置信息</div>
    </div>
    <div class="mainua_form marginTop20" v-loading="listLoading">
      <el-form
        :inline="false"
        class="demo-form-inline"
        ref="userListFrom"
        label-width="200px"
      >
        <div style="min-height: 306px">
          <div v-for="(item, index) in list" :key="index">
            <el-form-item :label="item.remark + ':'">
              <el-input
                v-model="item.value"
                :disabled="item.disabled"
                clearable
              ></el-input>
              <el-button @click="setting_edit_dialog(item)">修改</el-button>
            </el-form-item>
          </div>
        </div>

        <el-form-item label="" prop="">
          <el-button type="primary" @click="setting_add_dialog" v-repeatClick
            >添加配置</el-button
          >
        </el-form-item>
      </el-form>

      <div class="clearfix"></div>
    </div>

    <!-- 添加弹窗 -->
    <el-dialog
      title="添加配置"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="addedFormVisible"
      class="main_dialog dialog550"
    >
      <el-form
        :inline="false"
        class="demo-form-inline"
        ref="addRecordListFrom"
        label-width="120px"
        :model="addForm"
        :rules="rules"
      >
        <el-form-item label="配置字段名:" prop="name">
          <el-input
            placeholder="配置字段名"
            v-model="addForm.name"
            clearable
            class="wid350"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="配置参数:" prop="value">
          <el-input
            placeholder="配置参数"
            v-model="addForm.value"
            clearable
            class="wid350"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="配置说明:" prop="remark">
          <el-input
            placeholder="配置说明"
            v-model="addForm.remark"
            clearable
            class="wid350"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addedFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setting_add" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="修改配置"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="editedFormVisible"
      class="main_dialog dialog550"
    >
      <el-form
        :inline="false"
        class="demo-form-inline"
        ref="editRecordListFrom"
        label-width="120px"
        :model="editForm"
        :rules="rules"
      >
        <el-form-item label="配置字段名:" prop="name">
          <el-input
            placeholder="配置字段名"
            v-model="editForm.name"
            clearable
            class="wid350"
            disabled
          >
          </el-input>
        </el-form-item>
        <el-form-item label="配置参数:" prop="value">
          <el-input
            placeholder="配置参数"
            v-model="editForm.value"
            clearable
            class="wid350"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="配置说明:" prop="remark">
          <el-input
            placeholder="配置说明"
            v-model="editForm.remark"
            clearable
            class="wid350"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editedFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setting_edit" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { uploadPath } from "@/api/currency";
import {
  setting_info,
  setting_edit,
  setting_add,
} from "@/api/global/globalSetting";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/global/globalSetting.js";

export default {
  computed: {
    ...mapGetters(["avatar"]),
  },
  data() {
    return {
      // 上传图片
      uploadPath,
      rules,
      // 搜索
      form: {
        site_title: "",
      },
      list: [],
      listLoading: false,
      addedFormVisible: false,
      addForm: {
        name: "",
        value: "",
        remark: "",
      },
      editedFormVisible: false,
      editForm: {
        name: "",
        value: "",
        remark: "",
      },
    };
  },

  methods: {
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      // console.log(res, file, fileList);
      this.form.site_logo = res.path;
      this.form.pic = res.src;
    },

    // 基本信息
    setting_info() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      setting_info(data).then((res) => {
        if (res.errcode == 0) {
          res.data.list.map((e) => {
            e.disabled = true;
          });
          this.list = res.data.list;
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 添加弹窗
    setting_add_dialog() {
      this.addForm.name = "";
      this.addForm.value = "";
      this.addForm.remark = "";
      this.addedFormVisible = true;
    },
    // 添加记录
    setting_add() {
      this.$refs["addRecordListFrom"].validate((valid) => {
        if (valid) {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            this.addForm
          );
          this.addedFormVisible = false;
          setting_add(data).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("添加成功");
              this.setting_info();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    // 修改记录
    setting_edit_dialog(item) {
      this.editForm = item;
      this.editedFormVisible = true;
    },
    setting_edit() {
      this.$refs["editRecordListFrom"].validate((valid) => {
        if (valid) {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            this.editForm
          );
          this.editedFormVisible = false;
          setting_edit(data).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("修改成功");
              this.setting_info();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
  },
  created() {
    this.setting_info();
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.global_company_info {
  .mainua_form {
    /deep/.el-input {
      width: 400px;
    }
    .mainua_an {
      /deep/.el-form-item__content {
        margin-left: 0px !important;
      }
      .reset {
        background: $subActive;
        color: $menuText;
        border-color: $subActive;

        &:hover,
        &:focus {
          border-color: $menuActiveText;
          color: $menuActiveText;
        }
      }
    }
  }
  padding: 10px 10px 10px 10px;
  margin: 0 15px 0 15px;

  /deep/.el-textarea__inner {
    width: 600px !important;
    height: 200px;
  }
  .global_cu {
    font-size: 12px;
    color: #eb0a0a;
    margin-top: -10px;
    padding-left: 7px;
  }
}
</style>
